<template>
  <div
    class='network-error'
    v-if="show"
  >
    <div
      class="cancel"
      @click="show = false"
    >
      <i class="el-icon-close"></i>
    </div>
    <div class="img">
      <img
        src="../../assets/images/tishi@2x.jpg"
        width="100%"
        height="100%"
      >
    </div>
    <div class="tip">提示</div>
    <div class="message">设备连接异常，请重新连接...</div>
    <div class="button">
      <el-button class="parmary">重新连接</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NetworkError',
  data() {
    return {
      show: true
    }
  }
}
</script>
<style lang='scss' scoped>
.network-error {
  position: absolute;
  top: calc(50% - 216px);
  left: calc(50% - 236px);
  width: 472px;
  height: 432px;
  background: #FFFFFF;
  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  text-align: center;

  .cancel {
    cursor: pointer;
    position: absolute;
    top: 32px;
    right: 32px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.06);
    font-size: 20px;
  }

  .img {
    margin: 102px auto 0;
    width: 98px;
    height: 98px;
  }

  .tip {
    margin-top: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    color: #333333;
  }

  .message {
    margin-top: 24px;
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    color: #666666;
  }

  .button {
    margin-top: 48px;

    .el-button {
      width: 376px;
      height: 48px;
      background: #365EFF;
      border-radius: 12px;
      font-size: 18px;
      color: #FFFFFF;
    }
  }
}
</style>